<template>
  <PageContainer>
    <div class="home-wrapper">
      <!-- 生产样标签 -->
      <div v-if="active === 'productions'">
        <SampleProduction />
      </div>
      <!-- 其他样标签 -->
      <div v-else-if="active === 'others'">
        <SampleOthers />
      </div>
      <van-tabbar v-model="active">
        <van-tabbar-item icon="orders-o" name="productions">生产样标签</van-tabbar-item>
        <van-tabbar-item icon="description-o" name="others">其他样标签</van-tabbar-item>
      </van-tabbar>
    </div>
  </PageContainer>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import SampleProduction from './SampleProduction.vue';
import SampleOthers from './SampleOthers.vue';
import PageContainer from '@/components/PageContainer.vue';

// ---------------- controller ----------------
const active = ref<string>('productions');

// ---------------- data ----------------



</script>

<style lang="scss" scoped>
.home-wrapper {
  padding: 10px;
  min-height: calc(100vh - 20px);
}
</style>
